<template>
  <div>
    <el-dialog
      title="提示"
      width="90%"
      top="5vh"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <baidu-map 
        class="bm-view" 
        center="深圳市"
        :zoom="15"
        :scroll-wheel-zoom="true"
        @click="getLocation"
        >
        <!-- 自动填充 -->
        <bm-auto-complete :sugStyle="{zIndex: 999999}">
          <div>          
            <el-input v-model="inputValue" placeholder="输入关键字进行模糊查询" @change="confirmAddress" style="margin-bottom:10px;margin-right:10px;width:400px"></el-input>
            <el-button type="primary" @click="confirmAddress">搜索</el-button>
          </div>
          <div v-show="infoWindow.lng" style="font-weight:600;font-size:20px;margin-bottom:10px;">经度：{{ infoWindow.lng }}， 纬度：{{ infoWindow.lat }}</div>
          <!-- 地址：{{model.address}} -->
        </bm-auto-complete>
        <bm-view class="map" style="width: 100%; height:100%; flex: 1"></bm-view>
        <!-- 区域检索 -->
        <bm-local-search :keyword="keyword" :auto-viewport="true"  :panel="false">
        </bm-local-search>
        <!-- 定位控件 -->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      </baidu-map>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props:[
    'Address'
  ],
  watch: {
    dialogVisible: function (newVal, oldVal) {
      if(newVal === true){
        this.$nextTick(() => {
          this.inputValue = this.Address || null
          // this.center = this.Address || '深圳市'
          this.confirmAddress()
        })
      }
    }
  },
  data(){
    return {
      dialogVisible: false,
      inputValue: '',
      keyword: '',
      center: '深圳市',
      model: {},
      infoWindow: {
        title: '',
        contents: '经纬度查询',
        show: false,
        lng: '',
        lat: '' 
      }
    }
  },
  mounted(){
  },
  methods: {
    handleClose(){
      this.dialogVisible = false
    },
    // 搜索框的搜索事件
    confirmAddress(e) {
      this.infoWindow.lng = ''
      this.infoWindow.lat = ''
      if (this.inputValue != ''){
        this.keyword = this.inputValue
      }
      //为啥使用延时？？
      //因为上面搜索框是change事件，变化的太快了看起来效果不好所以添加了延时
      setTimeout(()=>{
      //搜索时把需要标点的地址传入local.search中
        var local = new BMap.LocalSearch(this.map, {
          renderOptions:{map: this.map}
        });
        local.search(this.keyword);
      },600)
    },
    getLocation({type, target, point, pixel, overlay}){
      this.infoWindow.lng = point.lng
      this.infoWindow.lat = point.lat
      if(overlay !== null){
        this.inputValue = overlay.z.title;
      }
    },
    
    submit(){
      this.$emit('getAddress', this.inputValue)
      this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
.bm-view {
  width: 100%;
  height: 500px;
  margin-bottom:50px;
}
</style>